<template>
    <div>
        <button @click="addRecord">添加</button>
        <input type="text" name="keyword" id="keyword" v-model="keyword">
        <button @click="listRecords">查询</button>
    </div>
    <table class="table">
        <thead>
            <tr>
                <td>
                    序号
                </td>
                <td>
                    日期
                </td>
                <td>
                    描述
                </td>
                <td>
                    消费
                </td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(record, index) in records">
                <td>
                    {{ index }}
                </td>
                <td>
                    {{ tradingTime }}
                </td>
                <td>
                    {{ description }}
                </td>
                <td>
                    {{ getActualAmount(record) }}
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script lang="ts">
    import {
        ref,
        defineComponent
    } from 'vue'

    const directionOut = 0
    const directionIn = 1

    const recordList = [{
            id: 1,
            tradingTime: '2021-01-01',
            flowDirection: '支出',
            description: '描述',
            amount: "10",
        },
        {
            id: 2,
            tradingTime: '2021-01-01',
            flowDirection: '支出',
            description: '描述',
            amount: "20",
        },
        {
            id: 3,
            tradingTime: '2021-01-01',
            flowDirection: '支出',
            description: '描述',
            amount: "30",
        }
    ]

    export default defineComponent({
        name: 'RecordList',
        data() {
            return {
                records: recordList,
                keyword: ""
            }
        },
        methods: {
            getActualAmount(record) {
                if (record.flowDirection == directionIn) {
                    return '+ ' + record.amount
                } else if (record.flowDirection == directionOut) {
                    return '- ' + record.amount
                } else {
                    return 'NaN'
                }
            },
            listRecords() {

            }
        }
    })
</script>

<style>
    .table {
        width: 100%;
    }
</style>